<template>
	<view class="user-info-page page">
		<image :src="`${cloudStorage}index/top-bg.png`" mode="widthFix" class="top-bg"></image>
		<CustomNav :isBack="true" color="#000" :topBgColor="topBgColor" title="详情"></CustomNav>
		<view class="user-info-block block" :style="'margin-top:'+mt">
			<view class="user-photo-block">
				<image :src="detail.avatar" class="user-photo"></image>
			</view>
			<view class="user-name" v-if="detail.name">{{detail.name | filterRealName}}</view>
			<view class="user-name" v-else>微信用户</view>
		</view>
		<view class="form-block block">
			<view class="form-item">
				<view class="form-label">学历</view>
				<view class="form-ctrl">{{detail.user_info.education_text}}</view>
			</view>
			<view class="form-item">
				<view class="form-label">经验</view>
				<view class="form-ctrl">{{detail.user_info.experience_text}}</view>
			</view>
			<view class="form-item">
				<view class="form-label">意向工种</view>
				<view class="form-ctrl">{{detail.user_info.intention}}</view>
			</view>
			<view class="form-item">
				<view class="form-label">空闲时间</view>
				<view class="form-ctrl">{{detail.user_info.free_text}}</view>
			</view>
			<view class="form-item upload" style="border: none;">
				<view class="form-label">个人介绍</view>
				<textarea maxlength="-1" style="margin-top: 20rpx;" class="textarea" :disabled="true" v-model="detail.user_info.introduce"></textarea>
			</view>
			<view class="form-item upload">
				<view class="form-label">技能证书</view>
				<view class="upload-block">
					<template v-if="detail.user_info.skill_certificate.length>0">
						<view @click="viewImage(item)" class="item" v-for="(item,index) in detail.user_info.skill_certificate" :key="index">
							<image class="photo" :src="item" mode="aspectFill"></image>
						</view>
					</template>
					<view v-else class="empty">暂无</view>
				</view>
			</view>
			<view class="form-item upload">
				<view class="form-label">技能标签</view>
				<view class="upload-block">
					<template v-if="detail.user_info.skill_label_text.length>0">
					<view class="label-item" v-for="label in detail.user_info.skill_label_text">{{label}}</view>
					</template>
					<view v-else class="empty">暂无</view>
				</view>
			</view>
		</view>
		<view class="form-block block">
			<view class="title">个人评价</view>
			<view class="comments-block" v-if="comments.length>0">
				<view class="comments-item" v-for="item in comments" :key="item.id">
					<view class="user-block">
						<image class="user-photo" :src="item.user.logo" mode="aspectFill"></image>
						<view class="user-name">{{item.user.name}}</view>
					</view>
					<view class="comments-content">{{item.comments}}</view>
				</view>
			</view>
			<view v-else class="empty" style="padding-bottom: 20rpx;">暂无评价</view>
			<view v-if="comments.length>0" class="empty" style="padding-bottom: 20rpx;">只显示最近一百条数据</view>
		</view>
	</view>
</template>

<script>
	import {getUserInfoById,userComments} from '@/api/user.js';
	export default {
		data() {
			return {
				topBgColor: 'rgba(0,0,0,0)',
				detail:{
					avatar:'',
					name:'',
					user_info:{
						skill_certificate:[],
						skill_label_text:[],
						education_text:'',
						experience_text:'',
						intention:'',
						free_text:'',
						introduce:''
					}
				},
				comments:[],
			}
		},
		methods:{
			viewImage(url){
				uni.previewImage({
					current:url,
					urls:this.detail.user_info.skill_certificate
				})
			},
			getDetail(id){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				getUserInfoById({id}).then(res=>{
					this.detail=res;
					this.getComments(id)
				})
			},
			getComments(user_id){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				userComments({page:1,limit:100,user_id}).then((res)=>{
					this.comments=res.list||[]
				})
			}
		},
		onLoad(option) {
			this.getDetail(option.id);
		}
	}
</script>

<style lang="scss" scoped>
	.user-info-page {
		overflow: hidden;

		.top-bg {
			position: absolute;
			z-index: -1;
			width: 100%;
		}

		.block {
			width: $content-width;
		}
		.user-info-block {
			margin: 0 auto;
			display: flex;
			align-items: center;
		
			.user-photo-block {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				overflow: hidden;
		
				.user-photo {
					width: 100%;
					height: 100%;
				}
			}
		
			.user-name {
				font-weight: bold;
				margin-left: 20rpx;
				width: calc(100% - 160rpx);
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: flex;
			}
		}
		.form-block{
			margin: 30rpx auto;
			padding: 0 30rpx;
			background: #fff;
			border-radius: 14px;
			.title{
				height: 70rpx;
				width: 100%;
				display: flex;
				align-items: center;
			}
			.comments-block{
				.comments-item{
					width: 100%;
					.user-block{
						width: 100%;
						height: 120rpx;
						display: flex;
						align-items: center;
						.user-photo{
							width: 70rpx;
							height: 70rpx;
							border-radius: 50%;
							margin-right: 20rpx;
						}
						.user-name{
							font-size: 28rpx;
							width: calc(100%  - 90rpx);
							overflow: hidden;
							text-overflow:ellipsis;
							white-space: nowrap;
						}
					}
					.comments-content{
						width: 100%;
						line-height: 1.2;
					}
				}
			}
			
			.form-item{
				width: 100%;
				height: 140rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #efefef;
				.label-item{
					color: $orange-color;
					border: 1px solid $orange-color;
					border-radius: 6px;
					padding: 6rpx 30rpx;
					font-size: 28rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
				}
				.form-label{
					width: 180rpx;
					.require{
						color: red;
					}
					.no-require{
						color: #fff;
					}
				}
				.textarea{
					width: 100%;
					background: #f5f6f8;
					padding: 30rpx;
					border-radius: 12px;
					min-height: 250rpx;
				}
				.form-ctrl{
					width: calc(100% - 250rpx);
				}
				.iconfont{
					width: 40rpx;
					display: flex;
					justify-content: center;
					color: #999;
					font-size: 28rpx;
					margin-left: 20rpx;
				}
			}
			.form-item:last-child{
				border:none;
			}
			.form-item.upload{
				height: auto;
				min-height: 100rpx;
				flex-wrap: wrap;
				align-items: flex-start;
				.form-label{
					width: 100%;
					display: flex;
					align-items: center;
					margin-top: 30rpx;
				}
				.upload-block{
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					margin-top: 30rpx;
					.upload-btn{
						background:#f5f6f8 url('@/static/image/upload.png') no-repeat center;
						background-size: auto 50%;
						
					}
					.item{
						border-radius: 12rpx;
						width: calc(50% - 10rpx);
						margin-right: 20rpx;
						height: 200rpx;
						margin-bottom: 20rpx;
						position: relative;
						.photo{
							border-radius: 12rpx;
							width: 100%;
							height: 100%;
						}
						.iconfont{
							position: absolute;
							right: 5px;
							top: 5px;
							color: #fff;
							font-size: 40rpx;
							text-shadow: 0 0 1px #000;
						}
					}
					.item:nth-child(2n){
						margin-right: 0;
					}
				}
			}
		}
	}
</style>